{% extends "mybase2.html" %} 

{% block title %} 待办事项APP {% endblock %} 

{% block style %}
{{ super() }}
<style>
    .page {
        width: 58%;
        margin: 0 auto;
    }
 
</style>
{% endblock %}

{% block content %}
<div class="page">
	<h1 style="text-align: center; background-color: green; color: white; padding: 10px">待办事项APP</h1>
	<hr />

	<h2 style="background-color: yellow">待办事项</h2>
	{% if todo %}
	<ol>
		{% for t in todo %} {% if t.status==False %}
		<li>
			{{ t.title|safe }} - {{ t.posted_on.strftime('%Y-%m-%d %H:%M:%S') }} -
            <a href="{{ url_for('todo.del_todo', todo_id=t.id) }}">删除</a> | <a href="{{ url_for('todo.edit', todo_id=t.id) }}">更新 </a> |
			<a href="{{ url_for('todo.done', todo_id=t.id) }}">已完成</a>
		</li>
		{% endif %} {% endfor %}
	</ol>
	{% else %}
	<b>nothing</b>
	{% endif %}

	<h2 style="background-color: green">已完成事项</h2>
	{% if todo %}
	<ol>
		{% for t in todo %} {% if t.status==True %}
		<li>
			<del>{{ t.title|safe }}</del> - {{ t.posted_on.strftime('%Y-%m-%d %H:%M:%S') }} -
			<a href="{{ url_for('todo.del_todo', todo_id=t.id) }}">删除</a> |
			<a href="{{ url_for('todo.redo', todo_id=t.id) }}">撤销已完成</a>
		</li>
		{% endif %} {% endfor %}
	</ol>
	{% else %}
	<b>nothing</b>
	{% endif %}

	<h2 style="background-color: red">新建待办事项</h2>
	<form method="post" action="{{ url_for('todo.index') }}">
		<input id="title" name="title" placeholder="请输入待办事项内容" type="text" />
		<button type="submit">提交</button>
	</form>
	<br />

    {# get_flashed_messages需要结合后端的 flash("add book successfully!")   # 使用 flash 反馈消息 #}
	{% for message in get_flashed_messages() %}
	<div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; width: 800px; height: 30px">
		<div style="text-align: center">{{ message }}</div>
	</div>
	{% endfor %}

</div>

{% endblock %}
